<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="16">
				<el-card v-if="data">
					<div slot="header" class="clearfix"><span>客户信息</span></div>

					<el-form>
						<el-form-item label="姓名:">
							<span>{{ data.Name }}</span>
						</el-form-item>

						<el-form-item label="手机号:">
							<span>{{ data.Phone }}</span>
						</el-form-item>

						<el-form-item label="签约门店:">
							<span>{{ data.storeName || '未知' }}</span>
						</el-form-item>

						<el-form-item label="签约时间:">
							<span>{{ data.SignTime || '未知' }}</span>
						</el-form-item>
					</el-form>
				</el-card>

				<el-card class="mt30">
					<div slot="header" class="clearfix"><span>调查表信息</span></div>

					<el-form>
						<el-form-item label="姓名:">
							<span>{{ data.RealName || '未填写' }}</span>
						</el-form-item>

						<el-form-item label="年龄:">
							<span>{{ data.Phone || '未填写' }}</span>
						</el-form-item>

						<el-form-item label="生日:">
							<span>{{ data.Birthday || '未填写' }}</span>
						</el-form-item>

						<el-form-item label="性别:">
							<span>{{ data.Sex == 0 ? '女' : '男' }}</span>
						</el-form-item>

						<el-form-item :label="item.answerTitle + ':'" v-for="item in answers">
							<span>{{ item.answerInfo }}</span>
						</el-form-item>

						<el-form-item>
							<el-avatar shape="square" :size="200" fit="fill" :src="data.LeftFaceImg"></el-avatar>
							<el-avatar shape="square" style="margin-left: 20px" :size="200" fit="fill" :src="data.MainFaceImg"></el-avatar>
							<el-avatar shape="square" style="margin-left: 20px" :size="200" fit="fill" :src="data.RightFaceImg"></el-avatar>
						</el-form-item>
					</el-form>
				</el-card>

				<el-card class="mt30">
					<div slot="header" class="clearfix"><span>服务团队</span></div>

					<div class="server">
						<div class="item">
							<img class="avatar" :src="data.LeftFaceImg" alt="" />
							<div class="info">
								<span class="name">{{ data.dayUser }} (白班)</span>
							</div>
						</div>

						<div class="item">
							<img class="avatar" :src="data.LeftFaceImg" alt="" />
							<div class="info">
								<span class="name">{{ data.nightName }} (夜班)</span>
							</div>
						</div>

						<div class="item">
							<img class="avatar" :src="data.LeftFaceImg" alt="" />
							<div class="info">
								<span class="name">{{ data.expertName }} (专员)</span>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card class="logCard">
					<div slot="header" class="clearfix"><span>跟进记录</span></div>
                    
					<div class="logs" v-for="item in logs" :key="item.id">
						<div class="userInfo">
							<div class="userInfo-l">
								<img />
							</div>

							<div class="userInfo-r">
								<div class="top">
									<div class="type">{{ getServerUserType(item.serverUserType) }}</div>
									<div class="time">{{item.created}}</div>
								</div>
								<div class="name">{{item.serverUserName}}</div>
							</div>
						</div>
                        <div class="content">{{item.content}}</div>
					</div>

                    <div class="more" @click="nextPage">{{  hasNextPages ? '查看更多' : '没有更多的数据了'  }}</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import {serverUserType}from '@/config/account'
import request from '@/utils/request';
export default {
	data() {
		return {
            id:0,
			data: {},
            logs:[],
            pageno:1,
            hasNextPages:false,
			answers:[]
		};
	},
	mounted() {
		this.id = this.$route.query.id;
		this.load();
        this.loadLogs()
	},
	methods: {
		async load() {
			this.data = await request.get(`admin-client/detail/${this.id}`);
			this.answers = await request.get(`admin-client/detail-answer/${this.id}`);
		},
        async loadLogs(){
            let logs = await request.get(`admin-client/clock-log/${this.id}`, { headers : { pageno: this.pageno, pagesize: 20 } })
			this.logs = this.logs.concat(logs.items);
            this.hasNextPages = logs.hasNextPages;
        },
        getServerUserType(val){
            return serverUserType.find(item => item.id == val).name;
        },
        nextPage(){
            if(!this.hasNextPages) return;
            this.pageno = this.pageno + 1;
            this.loadLogs()
        }
	},
};
</script>

<style>
.mt30 {
	margin-top: 30px;
}

.server {
	display: flex;
	justify-content: space-around;
}

.sersver .item {
	text-align: center;
}

.avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #ccc;
}

.info {
	margin-top: 10px;
}

.logCard{
    max-height: 80vh;
    overflow-y: scroll;
}

.logs {
	border-bottom: 1px solid #dbdbdb;
    margin-bottom: 30px;
}

.logs:last-child{
    border-bottom: none;
    margin-bottom: 0;
}

.userInfo{
    display: flex;
}

.userInfo-l{
    margin-right: 10px;
}

.userInfo-l img{
    width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #ccc;
	margin-right: 10px;
}

.userInfo-r{
    flex: 1;	
}


.top {
	display: flex;
	justify-content: space-between;
}

.top .time{
    color: #ddbdbb;
}

.userInfo-r .name{
    font-size: 14px;
    font-weight: 900;
    margin: 5px 0 0 0;
}

.content{
    font-size: 12px;
    color: #696969;
    padding: 15px;
    box-sizing: border-box;
}

.more{
    font-size: 12px;
    text-align: center;
    color:#ccc;
    cursor: pointer;
}

</style>
